/*
 * @Description: 知悉范围列表表格组件
 * @Author: Rfan
 * @Date: 2022-04-07 15:49:26
 * @LastEditTime: 2022-05-25 09:00:21
 */

import { FC, useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import { Table, Tag } from 'antd';

import styles from '../../styles/list.module.scss';
import { useScopeOfKnowledgeContext } from '../../contexts/ScopeOfKnowledgeContext';
import { IPageQuery } from '@/interfaces/global';

const cx = classNames.bind(styles);

const { Column } = Table;

export type RuleTableProps = {
  title?: string;
  data?: any;
};

const ListTable: FC<RuleTableProps> = ({ data }) => {
  console.log('rule pane:', data);
  const {
    selectFond,
    selectAT,
    selectLevel,
    list,
    selectItems,
    getScopeOfKnowledgeList,
    setSelectKey,
    validTypesFilter
  } = useScopeOfKnowledgeContext();
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });

  useEffect(() => {
    if (selectAT.id || selectLevel.level) {
      setListQuery((state: IPageQuery) => {
        return {
          ...state,
          param: {
            fondId: selectFond.id,
            archiveTypeId: selectAT.id,
            atCode: selectAT.atCode,
            atType: selectAT.atType,
            level: selectLevel.level
          }
        };
      });
    }
  }, [selectAT.id, selectLevel.level]);

  useEffect(() => {
    if (listQuery?.param?.level >= 0) {
      setLoading(true);
      getScopeOfKnowledgeList(listQuery)
        .then((res: any) => {
          console.log('back', res);
          setTotal(res?.totalCount);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);

  // 表格选项相关设置
  const onSelectChange = (selectedKeys: number[]): void => {
    console.log('selectedKeys changed: ', selectedKeys);
    setSelectKey(selectedKeys);
  };

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  // 切换页码触发
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state: any) => {
      return {
        ...state,
        pageNo: page,
        pageSize
      };
    });
  };

  return (
    <div className={cx('approve-list')}>
      <Table
        dataSource={list}
        loading={loading}
        rowKey="id"
        size="small"
        bordered
        rowSelection={rowSelection}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="规则描述" dataIndex="ruleDescription" key="ruleDescription" align="center" />
        <Column title="规则表达式" dataIndex="ruleExpression" key="ruleExpression" align="center" />
        <Column
          title="是否生效"
          dataIndex="isValid"
          key="isValid"
          align="center"
          render={(text) => (
            <Tag color={validTypesFilter(text)?.color}>{validTypesFilter(text)?.name || '-'}</Tag>
          )}
        />
      </Table>
    </div>
  );
};

export default ListTable;
